CSS学习笔记(一): Hello CSS

  • 李雨
  • CSS
分类: CSS

内联样式

内联样式定义在HTML标签的style属性中。除了在body外的标签，style属性可以定义在任何一个HTML标签中。

1
<div style="color: red;font-size: 14px;">文字</div>

这样定义的样式只作用于这个div，不会影响到div以外的内容。内联style属性中只能放CSS样式规则大括号之内的键值对，也不能包含@import指令。通常不推荐使用内联样式，如果这样做的话会使HTML变得混乱，会使CSS灵活性大大的降低。

style标签

也可以使用style标签定义样式。它以HTML标签的形式出现在head标签内。

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
  body {
    color: red;
  }
  
  div {
    font-size: 14px;
  }
  
</style>

这样定义的样式作用于全局，标签内定义的样式可以称为文档样式表。其中可以包含多组样式，也可以使用@import指令包含多个样式表链接。

属性

  • type: 表示类型，一般值为text/css，描述加载的数据类型，浏览器通过这个属性识别样式表是CSS样式表
  • media: 定义当前样式应用的媒体类型，下一章详细说明

link标签

link标签用来引用外部样式表，应该优先考虑使用。

index.html

1
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default">

sheet1.css

1
2
3
4
5
6
7
body {
  color: red;  
}
  
div {
  font-size: 14px;
}

这样定义的样式是一个独立的外部文件，通过link标签可以应用到当前的文档中。link标签必须是head标签的子元素。外部样式表中不能包含除CSS规则和CSS注释以外的任何标记，如果出现，会导致部分CSS规则会被忽略。
外部样式一般以.css为文件名后缀，也不是必须的。但是一些老版本的浏览器无法识别包含样式表的文件，除非以.css为扩展名。

属性

常见的link标签的属性有rel，type，href和media等。这里主要说明和样式相关的属性和属性值。

rel

rel属性表示外部文件和当前文档的关系，值通常设置为stylesheet，表示外部文件是样式表。除了stylesheet，rel属性还有其他可选值。

值 描述
alternate 链接到该文档的替代版本（例如打印页、翻译或镜像）
author 链接到该文档的作者。
help 链接到帮助文档。
icon 表示该文档的图标。
licence 链接到该文档的版权信息。
next 集合中的下一个文档。
pingback 指向 pingback 服务器的 URL。
prefetch 规定应该对目标文档进行缓存。
prev 集合中的前一个文档。
search 链接到针对文档的搜索工具。
sidebar 链接到应该显示在浏览器侧栏的文档。
stylesheet 指向要导入的样式表的 URL。
tag 描述当前文档的标签（关键词）。

这里要特地说明的是alternate，可以利用这一属性设置网页候选样式

1
<link rel="alternate stylesheet" type="text/css" href="sheet1.css" title="Default">

像上面的代码一样，设置rel="alternate stylesheet"，同时设置title属性，就会有一个主题为Default的候选样式供选择。大多数Geckco内核的浏览器支持这一功能，你可以在火狐浏览器“查看>页面样式”菜单中找到。title属性是全局属性，每个标签都可以定义，但是定义在link标签中则表示样式的主题，也可以定义多个同一主题文件。

type

type属性表示类型文件，值通常为text/css，描述加载的文件类型，浏览器通过这个属性识别样式表是CSS样式表。

href

href属性表示样式文件的URL，可以是绝对路径也可以是相对路径。

hreflang

hreflang属性表示链接文档的语言类型。

media

media属性表示当前样式将要应用到什么样的媒体设备上。它的值需要符合媒体查询列表的格式。现代Web浏览器主要支持媒体类型的值主要是all，screen和print，在全屏模式中，Opera 也支持 projection属性值。

1
2
<!-- 表示在屏幕设备上应用该样式，其他媒体类型无效 -->
<link rel="stylesheet" type="text/css" href="sheet1.css" media="screen">

也可以设置多个值

1
2
<!-- 表示在屏幕设备上和打印时应用该样式，其他媒体类型无效 -->
<link rel="stylesheet" type="text/css" href="sheet1.css" media="screen, print">

all表示所有设备都使用该样式，其他不常用的值有：

  • aural：用于语音合成器，屏幕阅读器和文档的其他声音表现
  • braille：用Braille设备表现文档时使用
  • embossed：用Braille打印设备打印时使用
  • handheld：用于手持设备，如个人数字助理或支持Web的蜂窝电话
  • projection：用于投影媒体
  • tty：在固定间距环境中（如电传打字机）显示文档时使用
  • tv：在电视上显示文档时使用

HTML5之后，这个属性可以设置更多的值，值必须是media query list。参照CSS3的媒体查询。

1
2
<!-- 表示在屏幕设备上和打印时应用该样式，其他媒体类型无效 -->
<link rel="stylesheet" type="text/css" href="sheet1.css" media="screen, print">

可能的操作符

值 描述
and 规定 AND 操作符
not 规定 NOT 操作符
, 规定 OR 操作符

设备

值 描述
all 默认。适用于所有设备。
aural 语音合成器。
braille 盲文反馈装置。
handheld 手持设备（小屏幕、有限的带宽）。
projection 投影机。
print 打印预览模式/打印页。
screen 计算机屏幕。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视类型设备（低分辨率、有限的滚屏能力）。

属性值

值 描述
width 规定目标显示区域的宽度。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (min-width:500px)"
height 规定目标显示区域的高度。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (max-height:700px)"
device-width 规定目标显示器/纸张的宽度。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (device-width:500px)"
device-height 规定目标显示器/纸张的高度。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (device-height:500px)"
orientation 规定目标显示器/纸张的方向。可能的值：”portrait” or “landscape”例子：media="all and (orientation: landscape)"
aspect-ratio 规定目标显示区域的宽度/高度比可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio 规定目标显示器/纸张的 device-width/device-height 比率可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (aspect-ratio:16/9)"
color 规定目标显示器的 bits/color。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (color:3)"
color-index 规定目标显示器可以处理的颜色数。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (min-color-index:256)"
monochrome 规定单色帧缓冲中的 bits/pixel。可使用 “min-“ 和 “max-“ 前缀。例子：media="screen and (monochrome:2)"
resolution 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 “min-“ 和 “max-“ 前缀。例子：media="print and (resolution:300dpi)"
scan 规定 tv 显示器的扫描方式。可能的值：”progressive” 和 “interlace”。例子：media="tv and (scan:interlace)"
grid 规定输出设备是否是网格或位图。可能的值：”1” 为网格，否则为 “0”。例子：media="handheld and (grid:1)" 
1
2
<!-- 表示在宽度大于768px的屏幕设备上应用该样式，其他媒体类型无效 -->
<link rel="stylesheet" type="text/css" href="sheet1.css" media="screen and (min-width:768px)">

@import

@import指令用来从外部加载样式文件，类似link标签，但是和link标签还是有很多区别的。

1
2
3
4
5
6
7
/* 以下三种方式都是正确的，相对路径和绝对路径都可以*/
/* 1 */
@import url(sheet2.css);
/* 2 */
@import url("sheet2.css");
/* 3 */
@import sheet2.css;

@import指令只能用于style标签内或者css样式文件中，并且必须出现在其他的css规则之前，否则浏览器可能会忽略@import指令。

1
2
3
4
html {
  font-size: 14px;
}
@import url(index02.css);

上面代码中@import指令将会被忽略。

只要是通过@import指令正确导入的外部样式表都会加载，无法指定候选样式表，但是可以指定media媒体类型，直接在后面添加查询条件即可。

1
@import url(index02.css) screen and (min-width:768px);

link和@import的区别

  1. 最主要的区别在于lin是属于XHTML标签，除了可以引用样式文件，还可以引用icon等资源，详见rel属性，而@import则是css2.1中的语法特性，只能引用css
  2. 加载顺序不同，link加载的css时，是一种并行加载CSS方式，而@import则在整个页面加载完成后才加载
  3. 兼容性的区别，@import是CSS2.1才特有的，部分浏览器不支持
  4. link标签可以通过javascript控制，而@import不能

博客首页 我的主页

分类

标签

精选

bwidget-timespinner配置文档

AngularJS学习笔记：Provider和Service

目录

  1. 内联样式
  2. style标签
    1. 属性
  3. link标签
    1. 属性
      1. rel
      2. type
      3. href
      4. hreflang
      5. media
  4. @import
  5. link和@import的区别